<template>
	<Page page="Mine" title="个人中心"
		icon="/static/svg/mine-index.svg" />
	<view class="user-card">
		<view class="user-avatar-section">
			<view class="avatar-container">
				<image class="user-avatar"
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20cyclist%20user%20profile%20avatar%20portrait&image_size=square" />
			</view>
			<view class="user-basic-info">
				<view class="user-name">黄长江</view>
				<view class="user-level advanced">
					<up-image src="/static/svg/mine-huiz.svg" width="20px" height="20px"></up-image>
					<view>资深骑士</view>
				</view>
				<view class="user-id"># NB12345</view>
			</view>
		</view>
		<view class="user-stats">
			<view class="stat-item">
				<up-image src="/static/svg/mine-join.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">12</view>
					<view class="stat-label">参与活动</view>
				</view>
			</view>
			<view class="stat-item">
				<up-image src="/static/svg/mine-get.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">12</view>
					<view class="stat-label">获得徽章</view>
				</view>
			</view>
			<view class="stat-item">
				<up-image src="/static/svg/number.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">12</view>
					<view class="stat-label">好友</view>
				</view>
			</view>
			<view class="stat-item">
				<up-image src="/static/svg/mine-pm.svg" width="40px" height="40px"></up-image>
				<view class="stat-content">
					<view class="stat-number">#12</view>
					<view class="stat-label">排名</view>
				</view>
			</view>
		</view>
	</view>
	<view class="level-progress-card">
		<view class="progress-header">
			<view class="progress-title-section">
				<view class="progress-icon iconfont">&#xe6be;</view>
				<view class="progress-title">等级进度</view>
			</view>
			<view class="current-points">
				<text class="primary-color font-lg">2850</text>
				<text>/</text>
				<text>3000 积分</text>
			</view>
		</view>
		<view class="up-m-b-32">
			<up-line-progress :showText="false" :percentage="30" height="12px" inactiveColor="#CBD5E1"
				activeColor="#2563EB"></up-line-progress>
		</view>
		<view class="up-flex up-flex-between up-flex-items-center up-m-b-40">
			<Tag name="one" text="资深骑士" icon="&#xe799;"></Tag>
			<Tag name="next" text="传奇骑士" icon="&#xe646;"></Tag>
		</view>
		<view class="points-needed">
			<view class="needed-icon iconfont">&#xe65b;</view>
			<view>还需<text class="font-weight-bold up-p-l-6 up-p-r-6">2150</text>积分升到下一级</view>
		</view>
	</view>

	<view class="level-progress-card">
		<view class="progress-header">
			<view class="progress-title-section">
				<view class="progress-icon huiz-icon iconfont">&#xe671;</view>
				<view class="progress-title">最近获得的徽章</view>
			</view>
			<view class="view-all-btn">
				<view>查看全部</view>
				<view class="iconfont">&#xe67f;</view>
			</view>
		</view>
		<view class="badges-grid">
			<view class="badge-item">
				<up-image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=2024%20new%20year%20cycling%20badge%20icon&image_size=square"
					width="56px" height="56px" shape="circle"></up-image>
				<view class="up-m-t-24">
					<view class="badge-name">2024新年骑行徽章</view>
					<view class="badge-time">2024-01-01</view>
				</view>
			</view>
			<view class="badge-item">
				<up-image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=2024%20new%20year%20cycling%20badge%20icon&image_size=square"
					width="56px" height="56px" shape="circle"></up-image>
				<view class="up-m-t-24">
					<view class="badge-name">2024新年骑行徽章</view>
					<view class="badge-time">2024-01-01</view>
				</view>
			</view>
			<view class="badge-item">
				<up-image
					src="https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=2024%20new%20year%20cycling%20badge%20icon&image_size=square"
					width="56px" height="56px" shape="circle"></up-image>
				<view class="up-m-t-24">
					<view class="badge-name">2024新年骑行徽章</view>
					<view class="badge-time">2024-01-01</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import Page from '@/components/Page.vue';
	import Tag from '@/components/Tag.vue'
</script>

<style lang="scss" scoped>
	.user-card {
		margin: 24px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 24px;
		padding: 32px;
		color: white;
		position: relative;
		overflow: hidden;
		box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);

		.user-avatar-section {
			display: flex;
			align-items: center;
			gap: 24px;
			margin-bottom: 40px;
			position: relative;
			z-index: 1;

			.avatar-container {
				position: relative;
				padding: 4px;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
				border-radius: 50%;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

				.user-avatar {
					width: 80px;
					height: 80px;
					border-radius: 50%;
					object-fit: cover;
					border: 2px solid rgba(255, 255, 255, 0.8);
					transition: transform 0.3s ease;
				}
			}

			.user-basic-info {
				flex: 1;
				min-width: 0;

				.user-name {
					font-size: 22px;
					font-weight: 700;
					margin-bottom: 8px;
					text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				}

				.user-level {
					display: flex;
					align-items: center;
					gap: 8px;
					margin-bottom: 10px;
					padding: 6px 12px;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 12px;
					backdrop-filter: blur(10px);
					border: 1px solid rgba(255, 255, 255, 0.3);
					width: -moz-fit-content;
					width: fit-content;
					font-size: 12px;

					.iconfont {
						font-size: 12px;
					}
				}

				.user-id {
					font-size: 14px;
					opacity: 0.8;
					font-weight: 500;
				}

			}
		}

		.user-stats {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 16px;
			position: relative;
			z-index: 1;

			.stat-item {
				display: flex;
				align-items: center;
				gap: 12px;
				padding: 16px;
				background: rgba(255, 255, 255, 0.15);
				border-radius: 16px;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.2);
				cursor: pointer;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

				.stat-content {
					flex: 1;
					min-width: 0;

					.stat-number {
						font-size: 20px;
						font-weight: 700;
						margin-bottom: 2px;
						text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
					}

					.stat-label {
						font-size: 10px;
						opacity: 0.9;
						font-weight: 500;
					}
				}
			}
		}
	}

	.level-progress-card {
		box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px;
		position: relative;
		background: linear-gradient(135deg, rgb(255, 255, 255), rgb(248, 250, 252));
		margin: 1.5rem;
		padding: 24px;
		border-radius: 20px;
		border-width: 1px;
		border-style: solid;
		border-color: rgba(148, 163, 184, 0.2);
		border-image: initial;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			pointer-events: none;
			background: linear-gradient(135deg, rgba(59, 130, 246, 0.02), rgba(147, 51, 234, 0.02));
		}

		.progress-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			position: relative;
			z-index: 1;

			.progress-title-section {
				display: flex;
				align-items: center;
				gap: 12px;

				.progress-icon {
					width: 36px;
					height: 36px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgb(255, 255, 255);
					font-size: 18px;
					background: linear-gradient(135deg, rgb(59, 130, 246), rgb(37, 99, 235));
					border-radius: 12px;

					&.huiz-icon {
						color: rgb(255, 255, 255);
						background: linear-gradient(135deg, rgb(245, 158, 11), rgb(217, 119, 6));
					}
				}

				.progress-title {
					font-size: 16px;
					font-weight: bolder;
					color: rgb(30, 41, 59);
				}
			}

			.current-points {
				display: flex;
				align-items: baseline;
				font-weight: 600;
				gap: 4px;
				font-size: 14px;
				color: rgb(100, 116, 139);
			}

			.view-all-btn {
				display: flex;
				align-items: center;
				color: rgb(245, 158, 11);
				font-size: 14px;
				font-weight: 600;
				gap: 6px;
				background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.1));
				border-width: 1px;
				border-style: solid;
				border-color: rgba(245, 158, 11, 0.2);
				border-image: initial;
				padding: 8px 12px;
				border-radius: 12px;
				transition: 0.3s;
			}
		}

		.badges-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			// margin-bottom: 20px;
			gap: 16px;

			.badge-item {
				text-align: center;
				cursor: pointer;
				position: relative;
				transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				padding: 16px 12px;
				border-radius: 16px;
				background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(248, 250, 252, 0.8));
				border-width: 1px;
				border-style: solid;
				border-color: rgba(148, 163, 184, 0.1);
				border-image: initial;
				overflow: hidden;

				&::before {
					content: "";
					position: absolute;
					top: 0px;
					left: 0px;
					right: 0px;
					bottom: 0px;
					opacity: 0;
					background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(251, 191, 36, 0.05));
					transition: opacity 0.3s;
				}

				.badge-name {
					font-size: 12px;
					color: rgb(30, 41, 59);
					font-weight: 600;
					margin-bottom: 4px;
				}

				.badge-time {
					font-size: 10px;
					color: rgb(100, 116, 139);
				}
			}
		}

		.points-needed {
			display: flex;
			align-items: center;
			font-size: 14px;
			color: rgb(71, 85, 105);
			position: relative;
			z-index: 1;
			gap: 8px;
			padding: 12px 16px;
			background: linear-gradient(135deg, rgb(241, 245, 249), rgb(226, 232, 240));
			border-radius: 12px;
			border-width: 1px;
			border-style: solid;
			border-color: rgba(148, 163, 184, 0.2);
			border-image: initial;

			.needed-icon {
				width: 20px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgb(255, 255, 255);
				font-size: 12px;
				flex-shrink: 0;
				background: linear-gradient(135deg, rgb(245, 158, 11), rgb(217, 119, 6));
				border-radius: 6px;
			}

		}

	}
</style>